<template>
  <div class="course-list">
    <!-- <el-tabs v-model="activeName" v-if="showCourseType">
      <el-tab-pane label="校本资源" name="1"> </el-tab-pane>
      <el-tab-pane label="校外资源" name="2"> </el-tab-pane>
    </el-tabs> -->
    <div class="serach-wrap">
      <Search :sourceType="activeName" />
    </div>
    <List :sourceType="activeName" />
    <Add :sourceType="activeName" />
  </div>
</template>
<script>
import courseCreate from '@/mixins/courseCreate'
export default {
  mixins: [courseCreate],
  components: {
    List: () => import('./List.vue'),
    Search: () => import('./Search.vue'),
    Add: () => import('./Add.vue'),
  },
  data() {
    return {
      activeName: '2',
    }
  },
  watch: {
    $route() {
      this.activeName = '2'
    },
  },
  mounted() {
    //没有校内校外，默认校外
    if (!this.showCourseType) {
      this.activeName = 2
    }
  },
}
</script>
<style scoped>
.course-list {
  position: relative;
}
.serach-wrap {
  /* position: absolute;
  right: 0;
  top: -54px;
  width: calc(100% - 300px); */
}
.course-list >>> .el-tabs__header {
  border-radius: 3px;
  box-sizing: border-box;
  background: #ececea;
  border: 1px solid #ddd;
}
.el-tabs--bottom .el-tabs__item.is-bottom:last-child,
.el-tabs--bottom .el-tabs__item.is-top:last-child,
.el-tabs--top .el-tabs__item.is-bottom:last-child,
.course-list >>> .el-tabs--top .el-tabs__item.is-top:last-child {
  padding-right: 40px !important;
}
.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
.course-list >>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 40px !important;
}
.course-list >>> .el-tabs__item {
  height: 48px;
  line-height: 48px;
  padding: 0 40px;
}
.course-list >>> .el-tabs__item.is-active {
  background: var(--colorHover1);
}
</style>